<script setup lang="ts">
import { NodeInfo } from "@/views/domain/kubeHud/api/k8s/types";
import { timeTrans } from "@/views/domain/kubeHud/utils";

type Prop = {
  nodeInfo?: NodeInfo;
};
const props = defineProps<Prop>();
</script>

<template>
  <div class="condition-wrapper">
    <el-table
      :data="props.nodeInfo?.status.conditions || []"
      table-layout="auto"
    >
      <el-table-column prop="type" label="Condition">
        <template #default="{ row }">
          <el-tag type="info">
            {{ row.type }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="Status" />
      <el-table-column prop="lastHeartbeatTime" label="Last Heartbeat">
        <template #default="{ row }">
          {{ timeTrans(row.lastHeartbeatTime, "YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="lastTransitionTime" label="Last Transition">
        <template #default="{ row }">
          {{ timeTrans(row.lastTransitionTime, "YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="Reason" />
      <el-table-column prop="message" label="Message">
        <template #default="{ row }">
          <span>{{ row.message || "-" }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss" scoped>
.condition-wrapper {
  .el-table {
    border-radius: 12px;
    overflow: hidden;
    --el-table-header-bg-color: var(--el-color-primary-dark-1);
    --el-table-header-text-color: var(--el-border-color-lighter);
  }
}
</style>
